/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import './GraphHint.scss';
@import '~styles/variables.scss';

$pipeline-summary-bg: white;
$summary_titlebar_bg: #f5f5f5;
$summary_border_color: #e1e1e1;
$option-hover-bg-color: #eeeeee;
$run_menu_bg_color: gray;
$graph_containers_border_color: lightgray;
$min_height_of_graph: 340px;

.pipeline-summary-modeless-wrapper {
  width: 100%;
}

.pipeline-summary {
  width: 100%;

  .graphs-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: $pipeline-summary-bg;
    overflow: auto;
    // Header + Top panel = 105 + Footer = 54 + summary title bar = 54 + border 1px + 41px for filter section
    // anti-pattern. This is NOT how we should do this.
    height: calc(100vh - (#{$height-of-footer} + #{$height-of-header} + 153px));

    > div {
      width: calc(50% - 20px);
      border-radius: 4px;
      height: calc(50% - 20px);
      min-height: $min_height_of_graph;
      padding: 10px;
      margin: 5px 10px;
      border: 1px solid lightgray;

      .graph-plot-container {
        width: calc(100% - 30px);
        height: calc(100% - 70px);
        margin: 15px;
      }
      .title-container {
        display: flex;
        justify-content: space-between;
        margin: 10px;

        .title {
          font-size: 18px;
          font-weight: 600;
        }
        .viz-switcher {
          display: flex;
          align-items: center;
          > span {
            cursor: pointer;
            &.chart {
              border-right: 1px solid;
              margin-right: 5px;
              padding-right: 8px;
            }
            &.active {
              font-weight: bold;
            }
          }
        }
      }

      .rv-xy-plot__inner {
        overflow: visible;

        .rv-xy-plot__series--bar {
          rect {
            cursor: pointer;
          }
        }
        .rv-xy-plot__axis__tick__text {
          font-size: 8.5px;
        }
      }

      @include GraphHint();
    }
  }
  .top-title-bar {
    padding: 15px 10px;
    background: $summary_titlebar_bg;
    display: flex;
    border: 1px solid $summary_border_color;
    border-radius: 4px 4px 0 0;
    > div {
      &:nth-child(1) {
        flex: 1;
        font-size: 16px;
        font-weight: 500;
      }
      &:nth-child(2) {
        flex: 1;
      }
    }
    .stats-container {
      > span {
        margin: 0 10px;
        vertical-align: middle;
        &.run-times {
          > span {
            margin: 0 10px;
          }
          .run-time-label {
            margin-right: 15px;
          }
        }
      }
      .icon-close {
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
  .filter-container {
    padding: 5px 10px 5px 10px;
    background: white;
    display: flex;
    align-items: center;
    .runs-dropdown {
      display: inline-block;
      margin-left: 10px;
      .btn.btn-secondary {
        border: 0;
        border-bottom: 1px solid lightgray;
        border-radius: 0;
        background: transparent;
        padding-left: 5px;
        padding-right: 5px;
        &:focus,
        &:active,
        &.active,
        &:hover {
          background: transparent;
          outline: none;
          box-shadow: none;
        }
        span {
          &:first-child {
            margin-right: 5px;
          }
        }
        .icon-chevron-down {
          font-size: 12px;
          margin-left: 5px;
        }
      }
      .dropdown-menu {
        padding: 0;
        .dropdown-item {
          padding: 10px;
          cursor: pointer;
          &:focus,
          &:active,
          &.active,
          &:hover {
            background: transparent;
            outline: none;
          }
          &:hover {
            background-color: $option-hover-bg-color;
          }
        }
        .dropdown-divider {
          height: 1px;
          background: $run_menu_bg_color;
          margin: 1px 0;
        }
      }
    }
  }
}
